<template>
    <div>
        <el-dialog v-model="props.PreviewVisible" title="预览效果" @close="handlePreviewClose" width="60%">

            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane v-for="(item, index) in newList" :key="item.languageId" :label="item.languageIdName"
                    :name="index">
                    <div style="position: relative;">
                        <image-preview :src="props.publicFrom.newImage"   width="100%" height="100%" fit="a"/>
                        <div v-html="item.description" style="position: absolute;top: 0;width: 100%;height: 100%;"></div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted, watch } from "vue";
const emits = defineEmits(["handlePreviewClose"]);
const { proxy } = getCurrentInstance();
const newList = ref([])
const activeName = ref(0)
const props = defineProps({
    PreviewVisible: {
        type: Boolean,
        default: false,
    },
    // 传值数据对象
    publicFrom: {
        type: Object,
        default: {},
    },
});
watch(
    () => props.PreviewVisible,
    () => {
        if (!props.PreviewVisible) return;
        // const img = new Image();
        // img.src =props.publicFrom.newImage
        // let imageUrl 
        // imageUrl = { width: img.width, height: img.height };

        // console.log(props.publicFrom);
        activeName.value = 0
        if (props.publicFrom?.titleGroups) {
            activeName.value = 0
            newList.value = props.publicFrom.titleGroups
            newList.value = newList.value.map(code => {
                return {
                    languageId: code.languageId,
                    languageIdName: code.languageIdName,
                    name: code.name,
                    description: decodeURIComponent(code.description),
                }
            })
        }

    })
const handlePreviewClose = () => {
    emits("handlePreviewClose")
}
</script>